<template>
    <div class="leftContentThree">
        <!--第二部分-->
        <div class="assessDetail">
            <div class="bestCityTitle">
                <!--宽窄竖线-->
                <div class="doubleLine lf">
                    <div class="wide lf"></div>
                    <div class="narrow lf"></div>
                </div>
                <!--最优城市-->
                <div class="bestCityP lf">
                    <div v-show="$store.state.changeN == 0" class="bestCityName lf">各城市所属站点舒适度统计</div>
                    <div v-show="$store.state.changeN == 1" class="bestCityName lf">各城市所属站点度假指数统计</div>
                    <div v-show="$store.state.changeN == 2" class="bestCityName lf">各城市所属站点风寒指数统计</div>
                    <div v-show="$store.state.changeN == 3" class="bestCityName lf">各城市所属站点温湿指数统计</div>
                </div>
            </div>
            <div class="threeLine">
                <div class="firstLine lf"></div>
                <div class="secondLine lf"></div>
                <div class="thirdLine lf"></div>
            </div>
            <div class="bestCharts">
                <div v-show="$store.state.changeN == 0" id="bestCharts"></div>
                <div v-show="$store.state.changeN == 1" id="bestCharts1"></div>
                <div v-show="$store.state.changeN == 2" id="bestCharts2"></div>
                <div v-show="$store.state.changeN == 3" id="bestCharts3"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    let echarts = require('echarts');
    export default {
        name: 'LeftContentThree',
        data(){
            return{
               threeName: "城市舒适度"
            }
        },
        props:{
            CityStationBCMIDJCounts:Array,
            CityStationHCIDJCounts:Array,
            CityStationTHIDJCounts:Array,
            CityStationWCIDJCounts:Array
        },
        watch:{
            CityStationBCMIDJCounts(){
                this.drawCharts()
            },
            CityStationHCIDJCounts(){
                this.drawCharts()
            },
            CityStationHCIDJCounts(){
                this.drawCharts()
            },
            CityStationHCIDJCounts(){
                this.drawCharts()
            },
        },
        mounted(){
            this.drawCharts()
        },
        methods: {
            drawCharts(){
                var chartsCity = [];
                var chartsCity1 = [];
                var chartsCity2 = [];
                var chartsCity3 = [];
                var one = [];
                    one[0] = [];
                    one[1]= [];
                    one[2]= [];
                var  two = [];
                    two[0] = [];
                    two[1] = [];
                    two[2] = [];
                var three = [];
                    three[0] = [];
                    three[1] = [];
                    three[2] = [];
                    three[3] = [];
                var four = [];
                    four[0] = [];
                    four[1] = [];
                    four[2] = [];
                    four[3] = [];
                //获取舒适度
                for(var i=0;i< this.CityStationBCMIDJCounts.length;i++){
                chartsCity[i] =  this.CityStationBCMIDJCounts[i].City;
                }
            
                for(var j=0;j< this.CityStationBCMIDJCounts.length;j++){
                    for(i=0;i< this.CityStationBCMIDJCounts[j].StationDJCounts.length;i++){
                        
                        switch( this.CityStationBCMIDJCounts[j].StationDJCounts[i].DJ){
                            case '舒适':{
                                one[0][j]= this.CityStationBCMIDJCounts[j].StationDJCounts[i].Count;
                                break;
                            }
                            case '一般舒适':{
                                one[1][j] = this.CityStationBCMIDJCounts[j].StationDJCounts[i].Count;
                                break;
                            }
                            case '不舒适':{
                                one[2][j] = this.CityStationBCMIDJCounts[j].StationDJCounts[i].Count;
                                break;
                            }
                        }
                    }
                }
                
                //获取度假指数
                for(var i=0;i< this.CityStationHCIDJCounts.length;i++){
                chartsCity1[i] =  this.CityStationHCIDJCounts[i].City;
                }
                
                for(var j=0;j< this.CityStationHCIDJCounts.length;j++){
                    for(i=0;i< this.CityStationHCIDJCounts[j].StationDJCounts.length;i++){
                        switch( this.CityStationHCIDJCounts[j].StationDJCounts[i].DJ){
                            case '特别适宜':{
                                two[0][j]= this.CityStationHCIDJCounts[j].StationDJCounts[i].Count;
                                break;
                            }
                            case '适宜':{
                                two[1][j]= this.CityStationHCIDJCounts[j].StationDJCounts[i].Count;
                                break;
                            }
                            case '不适宜':{
                                two[2][j]= this.CityStationHCIDJCounts[j].StationDJCounts[i].Count;
                                break;
                            }
                        }
                    }
                }
                //获取温湿指数
                for(var i=0;i< this.CityStationTHIDJCounts.length;i++){
                chartsCity2[i] =  this.CityStationTHIDJCounts[i].City;
                }
                
                for(var j=0;j< this.CityStationTHIDJCounts.length;j++){
                    for(i=0;i< this.CityStationTHIDJCounts[j].StationDJCounts.length;i++){
                        switch( this.CityStationTHIDJCounts[j].StationDJCounts[i].DJ){
                            case '无胁迫':{
                                three[0][j]= this.CityStationTHIDJCounts[j].StationDJCounts[i].Count;
                                break;
                            }
                            case '弱温湿胁迫':{
                                three[1][j]= this.CityStationTHIDJCounts[j].StationDJCounts[i].Count;
                                break;
                            }
                            case '中温湿胁迫':{
                                three[2][j]= this.CityStationTHIDJCounts[j].StationDJCounts[i].Count;
                                break;
                            }
                            case '强温湿胁迫':{
                                three[3][j]= this.CityStationTHIDJCounts[j].StationDJCounts[i].Count;
                                break;
                            }
                        }
                    }
                }
                //获取风寒指数
                for(var i=0;i< this.CityStationWCIDJCounts.length;i++){
                chartsCity3[i] =  this.CityStationWCIDJCounts[i].City;
                }
                
                for(var j=0;j< this.CityStationWCIDJCounts.length;j++){
                    for(i=0;i< this.CityStationWCIDJCounts[j].StationDJCounts.length;i++){
                        switch( this.CityStationWCIDJCounts[j].StationDJCounts[i].DJ){
                            case '无胁迫':{
                                four[0][j]= this.CityStationWCIDJCounts[j].StationDJCounts[i].Count;
                                break;
                            }
                            case '弱冷胁迫':{
                                four[1][j]= this.CityStationWCIDJCounts[j].StationDJCounts[i].Count;
                                break;
                            }
                            case '中冷胁迫':{
                                four[2][j]= this.CityStationWCIDJCounts[j].StationDJCounts[i].Count;
                                break;
                            }
                            case '强冷胁迫':{
                                four[3][j]= this.CityStationWCIDJCounts[j].StationDJCounts[i].Count;
                                break;
                            }
                           
                        }
                    }
                }
                
                //开始渲染
                let bestCharts = echarts.init(document.getElementById('bestCharts'));
                let bestCharts1 = echarts.init(document.getElementById('bestCharts1'));
                let bestCharts2 = echarts.init(document.getElementById('bestCharts2'));
                let bestCharts3= echarts.init(document.getElementById('bestCharts3'));

                let option = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    color:['#32F3A9','#63B5E6','#E8CE67' ],
                    legend: {
                        data: ['舒适', '一般舒适','不舒适'],
                        textStyle :{
                            color: '#fff'
                        },
                        top: 10,
                        itemWidth: 24,
                        itemHeight: 16,
                        itemGap: 6,
                    },
                        grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis:  {
                        type: 'category',
                        data: chartsCity,
                        axisLine: { //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#fff',                               
                            },
                        },
                        axisLabel: { //坐标轴刻度标签的相关设置
                            textStyle: {
                                fontSize : 12,
                                color: '#fff',
                                //margin:81,                               
                            },
                            interval:0,
                            rotate:0 //字体旋转
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff',
                            }
                        },
                    },
                    yAxis: {
                        name:"站点数",
                        type: 'value',
                        axisLabel: { //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: '#fff',
                                //margin:15,                               
                            },
                        },
                        axisLine: { //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#fff',                               
                            },
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff',
                            }
                        },
                    },
                    series: [
                        {
                            name: '舒适',
                            type: 'bar',
                            stack: '总量',                          
                            data: one[0]
                        },
                        {
                            name: '一般舒适',
                            type: 'bar',
                            stack: '总量',                          
                            data: one[1]
                        },
                        {
                            name: '不舒适',
                            type: 'bar',
                            stack: '总量',                           
                            data: one[2]
                        }
                    ]
                };
                let option1 = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    color:['#32F3A9','#63B5E6','#E8CE67' ],
                    legend: {
                        data: ['特别适宜', '适宜','不适宜'],
                        textStyle :{
                            color: '#fff'
                        },
                        top: 10,
                        itemWidth: 24,
                        itemHeight: 16,
                        itemGap: 6,
                    },
                        grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis:  {
                        type: 'category',
                        data: chartsCity1,
                        axisLine: { //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#fff',                               
                            },
                        },
                        axisLabel: { //坐标轴刻度标签的相关设置
                            textStyle: {
                                fontSize : 12,
                                color: '#fff',
                                //margin:81,                               
                            },
                            interval:0,
                            rotate:0 //字体旋转
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff',
                            }
                        },
                    },
                    yAxis: {
                        name:"站点数",
                        type: 'value',
                        axisLabel: { //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: '#fff',
                                //margin:15,                               
                            },
                        },
                        axisLine: { //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#fff',                               
                            },
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff',
                            }
                        },
                    },
                    series: [
                        {
                            name: '特别适宜',
                            type: 'bar',
                            stack: '总量',                          
                            data: two[0]
                        },
                        {
                            name: '适宜',
                            type: 'bar',
                            stack: '总量',                          
                            data: two[1]
                        },
                        {
                            name: '不适宜',
                            type: 'bar',
                            stack: '总量',                           
                            data: two[2]
                        }
                    ]
                };
                //温湿指数
                let option2 = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    color:['#32F3A9','#32F3A9','#63B5E6','#E8CE67' ],
                    legend: {
                        data: ['无胁迫','弱温湿胁迫','中温湿胁迫', '强温湿胁迫'],
                        textStyle :{
                            color: '#fff'
                        },
                        top: 10,
                        itemWidth: 24,
                        itemHeight: 16,
                        itemGap: 6,
                    },
                        grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis:  {
                        type: 'category',
                        data: chartsCity2,
                        axisLine: { //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#fff',                               
                            },
                        },
                        axisLabel: { //坐标轴刻度标签的相关设置
                            textStyle: {
                                fontSize : 12,
                                color: '#fff',
                                //margin:81,                               
                            },
                            interval:0,
                            rotate:0 //字体旋转
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff',
                            }
                        },
                    },
                    yAxis: {
                        name:"站点数",
                        type: 'value',
                        axisLabel: { //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: '#fff',
                                //margin:15,                               
                            },
                        },
                        axisLine: { //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#fff',                               
                            },
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff',
                            }
                        },
                    },
                    series: [
                        {
                            name: '无胁迫',
                            type: 'bar',
                            stack: '总量',                          
                            data: three[0]
                        },
                        {
                            name: '弱温湿胁迫',
                            type: 'bar',
                            stack: '总量',                          
                            data: three[1]
                        },
                        {
                            name: '中温湿胁迫',
                            type: 'bar',
                            stack: '总量',                          
                            data: three[2]
                        },
                        {
                            name: '强温湿胁迫',
                            type: 'bar',
                            stack: '总量',                          
                            data: three[3]
                        }
                    ]
                };
                //风寒指数
                let option3 = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    color:['#32F3A9','#32F3A9','#63B5E6','#E8CE67' ],
                    legend: {
                        data: ['无胁迫','弱冷胁迫','中冷胁迫','强冷胁迫'],
                        textStyle :{
                            color: '#fff'
                        },
                        top: 10,
                        itemWidth: 24,
                        itemHeight: 16,
                        itemGap: 6,
                    },
                        grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis:  {
                        type: 'category',
                        data: chartsCity3,
                        axisLine: { //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#fff',                               
                            },
                        },
                        axisLabel: { //坐标轴刻度标签的相关设置
                            textStyle: {
                                fontSize : 12,
                                color: '#fff',
                                //margin:81,                               
                            },
                            interval:0,
                            rotate:0 //字体旋转
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff',
                            }
                        },
                    },
                    yAxis: {
                        name:"站点数",
                        type: 'value',
                        axisLabel: { //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: '#fff',
                                //margin:15,                               
                            },
                        },
                        axisLine: { //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#fff',                               
                            },
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff',
                            }
                        },
                    },
                    series: [
                        {
                            name: '无胁迫',
                            type: 'bar',
                            stack: '总量',                          
                            data: four[0]
                        },
                        {
                            name: '弱冷胁迫',
                            type: 'bar',
                            stack: '总量',                          
                            data: four[1]
                        },
                        {
                            name: '中冷胁迫',
                            type: 'bar',
                            stack: '总量',                          
                            data: four[2]
                        },
                        {
                            name: '强冷胁迫',
                            type: 'bar',
                            stack: '总量',                           
                            data: four[3]
                        }
                    ]
                };
                if(document.documentElement.clientWidth <= 1594){
                    //1
                    option.legend.itemWidth = 12;
                    option.legend.itemHeight = 8;
                    option.legend.itemGap=2;

                    option.xAxis.axisLabel.textStyle.fontSize = 9;
                    option.xAxis.axisLabel.rotate = -40;
                    //2
                    option1.legend.itemWidth = 12;
                    option1.legend.itemHeight = 8;
                    option1.legend.itemGap=2;

                    option1.xAxis.axisLabel.textStyle.fontSize = 9;
                    option1.xAxis.axisLabel.rotate = -40;
                    //3
                    option2.legend.itemWidth = 12;
                    option2.legend.itemHeight = 8;
                    option2.legend.itemGap=2;

                    option2.xAxis.axisLabel.textStyle.fontSize = 9;
                    option2.xAxis.axisLabel.rotate = -40;
                    //4
                    option3.legend.itemWidth = 12;
                    option3.legend.itemHeight = 8;
                    option3.legend.itemGap=2;

                    option3.xAxis.axisLabel.textStyle.fontSize = 9;
                    option3.xAxis.axisLabel.rotate = -40;
                    
                    
                    
                }else{
                    //1
                    option.legend.itemWidth = 24;
                    option.legend.itemHeight = 16;
                    option.legend.itemGap=6;

                    option.xAxis.axisLabel.textStyle.fontSize = 12;
                    option.xAxis.axisLabel.rotate = 0;
                    //2

                    option1.legend.itemWidth = 24;
                    option1.legend.itemHeight = 16;
                    option1.legend.itemGap=6;

                    option1.xAxis.axisLabel.textStyle.fontSize = 12;
                    option1.xAxis.axisLabel.rotate = 0;
                    //3

                    option2.legend.itemWidth = 24;
                    option2.legend.itemHeight = 16;
                    option2.legend.itemGap=6;

                    option2.xAxis.axisLabel.textStyle.fontSize = 12;
                    option2.xAxis.axisLabel.rotate = 0;
                    //4
                    option3.legend.itemWidth = 24;
                    option3.legend.itemHeight = 16;
                    option3.legend.itemGap=6;

                    option3.xAxis.axisLabel.textStyle.fontSize = 12;
                    option3.xAxis.axisLabel.rotate = 0;
                }
                bestCharts.setOption(option);
                bestCharts1.setOption(option1);
                bestCharts2.setOption(option3);
                bestCharts3.setOption(option2);
                window.addEventListener("resize", function () {
                    if(document.documentElement.clientWidth <= 1594){
                        option1.legend.itemWidth = 12;
                        option1.legend.itemHeight = 8;
                        option1.legend.itemGap=2;

                        option1.xAxis.axisLabel.textStyle.fontSize = 9;
                        option1.xAxis.axisLabel.rotate = -40;
                    }else{
                        option1.legend.itemWidth = 24;
                        option1.legend.itemHeight = 16;
                        option1.legend.itemGap=6;

                        option1.xAxis.axisLabel.textStyle.fontSize = 12;
                        option1.xAxis.axisLabel.rotate = 0;
                    }
                    bestCharts.setOption(option1);
                    bestCharts.resize();
                });           
            }
    }
    }
</script>

<style lang="stylus" scoped>
    /* 样式穿透 .leftContentTwo >>> .littleLine */
    /* 所有样式 */
    .leftContentThree
        width: 4.03rem
        height: 32.1vh
        color: white
        background :rgba(7,23,42,0.49)
        .assessDetail
            .bestCityTitle
                width: 100%
                height: 5vh
                padding-top: 1.8vh
                .doubleLine
                    width: .11rem
                    height: 1.9vh
                    .wide
                        width: .07rem
                        height: 1.9vh
                        background : #41E6FD
                    .narrow
                        width: .02rem
                        height: 1.9vh
                        background : #41E6FD
                        margin-left: .02rem
                .bestCityName
                    font-size: .18rem
                    font-family: FZZXHJW--GB1-0
                    margin-left: .12rem
            .threeLine
                width: 100%
                height: .03rem
                .firstLine
                    width: 3.4rem
                    height: .03rem
                    background : #41E6FD
                .secondLine
                    width: .08rem
                    height: .03rem
                    background: #333
                    margin-left: .06rem
                    margin-right: .04rem
                .thirdLine
                    width: .44rem
                    height: .03rem
                    background: #FFFFFF
            .bestCharts
                #bestCharts
                    width: 21vw
                    height: 27vh 
                #bestCharts1
                    width: 21vw
                    height: 27vh  
                #bestCharts2
                    width: 21vw
                    height: 27vh  
                #bestCharts3
                    width: 21vw
                    height: 27vh         
</style>


